<template>
  <div class="patientDetails-view">
    <modules-title titleName="患者详情">
      <template slot="btn">
        <el-button class="border-btn" @click="goBack">返回</el-button>
        <el-button class="main-btn" type="primary" @click="addCase(3)"
          >补写病例</el-button
        >
        <el-button class="main-btn" type="primary" @click="addCase(1)"
          >新增病例</el-button
        >
      </template>
    </modules-title>

    <div class="scroll-view">
      <div class="basicInformation">
        <div class="title">基本信息</div>

        <div class="information-content">
          <div class="information-content-item">
            <p class="grayTitle">患者：</p>
            <span class="value">{{ datas.real_name }}</span>
          </div>

          <div class="information-content-item">
            <p class="grayTitle">性别：</p>
            <span class="value" v-if="datas.gender == 0">男</span>
            <span class="value" v-else>男</span>
          </div>

          <div class="information-content-item">
            <p class="grayTitle">年龄：</p>
            <span class="value">{{ datas.age | dealAge }}</span>
          </div>

          <div class="information-content-item">
            <p class="grayTitle">手机号：</p>
            <span class="value">{{ datas.mobile }}</span>
          </div>

          <div class="information-content-item">
            <p class="grayTitle">身份证号：</p>
            <span class="value">{{ datas.id_card }}</span>
          </div>

          <div class="information-content-item">
            <p class="grayTitle">地址：</p>
            <span class="value">{{ datas.address }}</span>
          </div>

          <div class="information-content-item">
            <p class="grayTitle">紧急联系：</p>
            <span class="value">{{ datas.tel }}</span>
          </div>
        </div>
      </div>

      <div class="recordInformation">
        <div class="title">门诊记录</div>

        <div>
          <el-table
            :header-cell-style="{
              backgroundColor: '#F5F5F5',
              color: '#333333',
              fontFamily: 'MicrosoftYaHeiUI',
              fontSize: '14px',
              fontWeight: 900,
              'text-align': 'center',
            }"
            :cell-style="{ 'text-align': 'center' }"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column label="日期" width="180">
              <template slot-scope="scope">
                <a class="date" @click="outpatientClick(scope.row.ID)">{{
                  scope.row.created_at
                }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="doctor_name" label="医生" width="180">
            </el-table-column>
            <el-table-column prop="result" label="诊断"> </el-table-column>
          </el-table>
        </div>
      </div>

      <div class="paginationView">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[3, 5, 7, 10]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <el-dialog
        title="病例详情"
        width="1000px"
        :visible.sync="dialogTableVisible"
      >
        <outpatient-details :id="id"></outpatient-details>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import outpatientDetails from "../outpatientDetails/index";
import { resumeById } from "../../../api/patient";
import { caseHistoryList } from "../../../api/outpatient";
export default {
  name: "index",
  components: { outpatientDetails },
  data: function () {
    return {
      datas: {},
      tableData: [],
      type: 0,

      pageSize: 10,
      pageNum: 1,
      loading: false,
      end: false,
      total: 0,
      dialogTableVisible: false,
      id: 0,
    };
  },
  mounted: function () {
    if (this.$route.query.type) {
      this.type = Number(this.$route.query.type);
    }
    if (this.$route.query.id) {
      this.getResume(this.$route.query.id);

      this.getCaseList(this.$route.query.id);
    }
  },
  methods: {
    addCase(type) {
      this.$router.push({
        name: "outpatient",
        query: {
          id: this.$route.query.id,
          type: type,
        },
      });
    },
    goBack: function () {
      this.$router.back();
    },
    //监听条数变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    //监听页码变化
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);

      this.pageNum = val;
      this.getData();
    },
    outpatientClick: function (id) {
      this.id = id;
      this.dialogTableVisible = true;
      // this.$router.push({name:"outpatientDetails",query:{id:id,type:this.type}})
    },
    getResume: function (id) {
      resumeById(id)
        .then((res) => {
          if (res.code == 200) {
            this.datas = res.data;
          }
        })
        .catch((res) => {});
    },
    getCaseList: function (id) {
      let data = {
        resume_id: Number(id),
        pager: {},
      };
      caseHistoryList(data)
        .then((res) => {
          if (res.code == 200) {
            this.total = res.data.total;
            this.tableData = res.data.data;
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/patient/patientDetails.scss";
</style>
